<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Matrix - Responsive Tile-Based Template</title>
<link href="style.css" title="style" rel="stylesheet" type="text/css" />
<link id="clink" href="css/style-blue.css" title="style" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/jquery.masonry.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/MetroJs.lt.js" type="text/javascript"></script>
<script src="scripts/jquery.fancybox-1.3.4.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/jquery.flexslider-min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/hoverintent.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/organictabs.jquery.js" type="text/javascript" charset="utf-8"></script>
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<!--[if lt IE 9]>
  <style type="text/css">
  @import url("style-ie8.css");
  </style>
  <script src="scripts/css3-mediaqueries.js" type="text/javascript" charset="utf-8"></script>
  <script>
    document.createElement('header');
    document.createElement('nav');
    document.createElement('section');
    document.createElement('article');
    document.createElement('aside');
    document.createElement('footer');
    document.createElement('hgroup');
    </script>
<![endif]-->
<script src="scripts/javascript.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="bodypat">
<section id="container">
    <div id="colorchanger">
    <a href="?theme=blue" class="cblue cbox" title="Blue Theme"><span class="blue">Blue</span></a>
    <a href="?theme=red" class="cred cbox" title="Red Theme"><span class="red">Red</span></a>
    <a href="?theme=green" class="cgreen cbox" title="Green Theme"><span class="green">Green</span></a>
    <a href="?theme=magenta" class="cmagenta cbox" title="Magenta Theme"><span class="magenta">Magenta</span></a>
    <a href="?theme=purple" class="cpurple cbox" title="Purple Theme"><span class="purple">Purple</span></a>
    <a href="?theme=teal" class="cteal cbox" title="Teal Theme"><span class="teal">Teal</span></a>
    <a href="?theme=lime" class="clime cbox" title="Lime Theme"><span class="lime">Lime</span></a>
    <a href="?theme=brown" class="cbrown cbox" title="Brown Theme"><span class="brown">Brown</span></a>
    <a href="?theme=pink" class="cpink cbox" title="Pink Theme"><span class="pink">Pink</span></a>
    <a href="?theme=mango" class="cmango cbox" title="Mango Theme"><span class="mango">Mango</span></a>
    <h4>Theme Color Selector</h4>
    </div>
<!-- BEGIN HEADER -->
<header class="clearfix">
<!-- BEGIN LOGO -->
<a id="headerlink" href="#" title="home"><img id="logo" src="images/logo.png" alt="logo" /><span id="sitename">Matrix</span></a>
<!-- END LOGO -->

<!-- BEGIN NAVIGATION -->
<nav>
<ul id="nav" class="clearfix">
<!-- Menu Item 1 -->
	<li><a href="index.html" title="Home"><span>Home</span></a></li>
<!-- Menu Item 2 -->
    <li class="current">
    	<a href="#" title="Portfolio"><span>Portfolio</span></a>
        <ul>
        	<li><a href="portfoliotile-large.html" title="Portfolio"><span>Tile - Large</span></a></li>
            <li><a href="portfoliotile-medium.html" title="Portfolio"><span>Tile - Medium</span></a></li>
            <li><a href="portfoliotile-small.html" title="Portfolio"><span>Tile - Small</span></a></li>
            <li><a href="portfoliolist.html" title="Portfolio"><span>Portfolio List</span></a></li>
            <li><a href="singleportfolio.html" title="Portfolio"><span>Single Item</span></a></li>
        </ul>
    </li>
<!-- Menu Item 3 -->
    <li><a href="#" title="Blog"><span>Blog</span></a>
    	<ul>
        	<li><a href="blogtile-large.html" title="Blog"><span>Tile - Large</span></a></li>
            <li><a href="blogtile-medium.html" title="Blog"><span>Tile - Medium</span></a></li>
        	<li><a href="bloglist.html" title="Blog List"><span>Blog List</span></a></li>
        	<li><a href="singleblogpost-1.html" title="Article 1"><span>Single Post</span></a></li>
        </ul>
    </li>
<!-- Menu Item 4 -->
    <li>
    	<a href="#" title="Features"><span>Features</span></a>
        <ul>
        	<li><a href="features-main.html" title="Features"><span>Main Features</span></a></li>
            <li><a href="features-columns.html" title="Features"><span>Columns</span></a></li>
            <li><a href="features-content.html" title="Features"><span>Content Area</span></a></li>
        </ul>
    </li>
<!-- Menu Item 5 -->
    <li><a href="aboutus.html" title="About"><span>About</span></a></li>
<!-- Menu Item 6 -->
    <li><a href="contact.html" title="Contact"><span>Contact</span></a></li>
</ul>
</nav>
<!-- END NAVIGATION -->
</header>
<!-- END HEADER -->

<!-- BEGIN CONTENT -->
<section id="content" class="clearfix">
<!-- Title --><div id="content-title">Portfolio</div>

<!-- BEGIN LEFT CONTENT -->
<section id="portfoliolist-left" class="clearfix">
<!-- BEGIN FILTER -->
<div id="filter" class="clearfix">
<ul id="port-filter">
	<li class="filter-current"><a href="#">All</a></li>
    <li><a href="#">Illustration</a></li>
    <li><a href="#">Graphic Design</a></li>
</ul>
</div>
<!-- END FILTER -->

	<div class="portfoliolist illustration">
        <a href="singleportfolio.html" title="Project 1">
        <div class="pl-projecttitle"><span class="pl-title">Project 1</span></div>
        <img class="portfoliolist-img" src="images/portfolio/item1_pl.png" alt="Project 1" />
        </a>
    </div>
    <div class="portfoliolist graphic-design">
        <a href="singleportfolio.html" title="Project 2">
        <div class="pl-projecttitle"><span class="pl-title">Project 2</span></div>
        <img class="portfoliolist-img" src="images/portfolio/item2_pl.png" alt="Project 2" />
        </a>
    </div>
    <div class="portfoliolist illustration">
        <a href="singleportfolio.html" title="Project 3">
        <div class="pl-projecttitle"><span class="pl-title">Project 3</span></div>
        <img class="portfoliolist-img" src="images/portfolio/item3_pl.png" alt="Project 3" />
        </a>
    </div>
    <div class="portfoliolist graphic-design">
        <a href="singleportfolio.html" title="Project 4">
        <div class="pl-projecttitle"><span class="pl-title">Project 4</span></div>
        <img class="portfoliolist-img" src="images/portfolio/item4_pl.png" alt="Project 4" />
        </a>
    </div>
    <div class="portfoliolist graphic-design">
        <a href="singleportfolio.html" title="Project 5">
        <div class="pl-projecttitle"><span class="pl-title">Project 5</span></div>
        <img class="portfoliolist-img" src="images/portfolio/item5_pl.png" alt="Project 5" />
        </a>
    </div>
    	<div class="portfoliolist illustration">
        <a href="singleportfolio.html" title="Project 6">
        <div class="pl-projecttitle"><span class="pl-title">Project 6</span></div>
        <img class="portfoliolist-img" src="images/portfolio/item6_pl.png" alt="Project 6" />
        </a>
    </div>
    <div class="portfoliolist illustration">
        <a href="singleportfolio.html" title="Project 7">
        <div class="pl-projecttitle"><span class="pl-title">Project 7</span></div>
        <img class="portfoliolist-img" src="images/portfolio/item7_pl.png" alt="Project 7" />
        </a>
    </div>
    <div class="portfoliolist graphic-design">
        <a href="singleportfolio.html" title="Project 8">
        <div class="pl-projecttitle"><span class="pl-title">Project 8</span></div>
        <img class="portfoliolist-img" src="images/portfolio/item8_pl.png" alt="Project 8" />
        </a>
    </div>
    
    <!-- BEGIN PAGINATION -->
    <div class="pagination clearfix">
    	<span class="pages">Page 1 of 3</span>
        <span class="current">1</span>
        <a href="#" class="page">2</a>
        <a href="#" class="page">3</a>
        <a href="#" class="nextpagelink">&raquo;</a>
    </div>
    <!-- END PAGINATION -->
</section>
<!-- END LEFT CONTENT -->

<!-- BEGIN SIDEBAR -->
<section id="sidebar">

<div id="search" class="widget">
<form action=" " />
<input id="search-field" type="search" name="sitesearch" class="placeholder" placeholder="Search" />
<input type="submit" id="search-submit" value=" " />
</form>
</div><!-- end #search -->

<div id="recent-box" class="widget">
<h5>Latest Articles</h5>
<ul class="articles-widget">
<li>
	<a href="singleblotpost-1.html">
	<img src="images/articles/article1_med.png" alt="Article 1" />
    <div class="title">This is the title of Article 1<br /><span class="redtxt">Illustration</span></div>
    <div class="more"></div>
    </a>
</li>
<li>
	<a href="singleblotpost-1.html">
	<img src="images/articles/article2_med.png" alt="Article 2" />
    <div class="title">This is the title of Article 2<br /><span class="limetxt">Cartoon Design</span></div>
    <div class="more"></div>
    </a>
</li>
<li>
	<a href="singleblotpost-1.html">
	<img src="images/articles/article3_med.png" alt="Article 3" />
    <div class="title">This is the title of Article 3<br /><span class="tealtxt">Graphic Design</span></div>
    <div class="more"></div>
    </a>
</li>
</ul>
</div><!-- end #recent-box -->

<div id="archive-box" class="widget">
<h5>Archive</h5>
<table id="archive">
<thead>
    <tr>
    	<th title="Monday" scope="col">M</th>
        <th title="Tuesday" scope="col">T</th>
        <th title="Wednesday" scope="col">W</th>
        <th title="Thursday" scope="col">T</th>
        <th title="Friday" scope="col">F</th>
        <th title="Saturday" scope="col">S</th>
        <th title="Sunday" scope="col">S</th>
    </tr>
</thead>
<tbody>
  <tr>
    <td class="none">&nbsp;</td>
    <td class="none">&nbsp;</td>
    <td class="none">1</td>
    <td class="none">2</td>
    <td class="red">3</td>
    <td class="teal">4</td>
    <td class="green">5</td>
  </tr>
  <tr>
    <td class="blue">6</td>
    <td class="none">7</td>
    <td class="lime">8</td>
    <td class="blue">9</td>
    <td class="green">10</td>
    <td class="red">11</td>
    <td class="none">12</td>
  </tr>
  <tr>
    <td class="blue">13</td>
    <td class="red">14</td>
    <td class="lime">15</td>
    <td class="teal">16</td>
    <td class="green">17</td>
    <td class="none">18</td>
    <td class="brown">19</td>
  </tr>
  <tr>
    <td class="teal">20</td>
    <td class="green">21</td>
    <td class="brown">22</td>
    <td class="blue">23</td>
    <td class="none">24</td>
    <td class="red">25</td>
    <td class="green">26</td>
  </tr>
  <tr>
    <td class="lime">27</td>
    <td class="lime">28</td>
    <td class="brown">29</td>
    <td class="none">30</td>
    <td class="green">31</td>
    <td class="none">&nbsp;</td>
    <td class="none">&nbsp;</td>
  </tr>
</tbody>
<tfoot>
	<tr>
    <td id="prev">&#8249;</td>
    <td id="month" colspan="5">August</td>
    <td id="next">&#8250;</td>
    </tr>
</tfoot>
</table>
</div><!-- end #archive-box -->

<div class="widget text-widget">
<h5>Text Widget</h5>
<p>Just some plain text, nothing special here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis sollicitudin aliquet. Nullam ut sapien eros, aliquet gravida turpis. Cras nec risus magna.</p>
</div><!-- end .text-widget -->


<div id="twitter" class="widget">
<h5>Latest Tweets</h5>
<ul id="tweeter">
</ul>

</div><!-- end #twitter -->

</section>
<!-- END SIDEBAR -->
</section>
<!-- END CONTENT -->

<!-- BEGIN FOOTER -->
<footer class="clearfix">

<div id="footer-social">
<a href="#"><span class="behance-mini"></span></a>
<a href="#"><span class="twitter-mini"></span></a>
<a href="#"><span class="facebook-mini"></span></a>
<a href="#"><span class="linkedin-mini"></span></a>
<a href="#"><span class="pinterest-mini"></span></a>
<a href="#"><span class="dribbble-mini"></span></a>
</div><!-- end #footer-social -->

<small>&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a> - <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a></small>
</footer>
<!-- END FOOTER -->

</section><!-- end #container -->
</div>

</body>
</html>
